<template>
  <div class="opinionBar">
    <loading :ownState = 'loadingState'></loading>
    <toast text="数据异常，请稍后重试" ref = 'toast'></toast>
    <div class="thumbs_up">
      <p :class="{'disabled': selected.state ==0 || selected.state ==1, 'selected': selected.state == 0}" @click="option(0)">看涨</p>
      <p v-if="selected.state==0 || selected.state==1">
        <span>今日我
          <b :class="{'red':selected.state==0,'green':selected.state==1}" >
            {{selected.state==0 ? "看涨" : "看跌"}}
          </b>
        </span>
        <span class="blue" @click="option(2)">点我重选</span>
      </p>
      <p v-else>
        <span  class="stateTip">我看今日大盘</span>
        <span  class="resetTip">每日04:00重置数据</span>
      </p>
      <p :class="{'disabled': selected.state ==0 || selected.state ==1, 'selected': selected.state == 1}" @click="option(1)">看跌</p>
    </div>
    <div class="progressBar">
      <p class="left" :style="cptWidth(selected.leftNum)">{{selected.leftNum}}人</p>
      <p class="right" :style="cptWidth(selected.rightNum)">{{selected.rightNum}}人</p>
    </div>
  </div>
</template>

<script>
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import tools from 'libs/common/tools.js'
import LocalDAO from '@/common/localDAO'
import Toast from '@/components/common/Toast'

export default {
  name: 'opinion-bar',
  data () {
    return {
      loadingState: false,
      selected: {
        state: '2',
        leftNum: null,
        rightNum: null
      },
      userCode: '',
      params: {
        opinion: '',
        userCode: '',
        date: ''
      }
    }
  },
  components: {
    Toast
  },
  methods: {
    cptWidth(num) {
      if (this.selected.leftNum == 0 && this.selected.rightNum == 0) {
        return {width: '50%'}
      }
      let width = (num / (Number(this.selected.leftNum) + Number(this.selected.rightNum)) * 100).toFixed(1) + '%';
      return {width: width, minWidth: '19%'}
    },
    // 选择看涨、看跌
    async option(choice) {
      if (choice != 2 && this.selected.state != 2) return;

      try {
        //  选择看涨看跌时  未登录状态 先进入登录页面
        const userCode = await remoteDAO.checkUserCode();
        this.$loop.pause();
        this.params.userCode = userCode;
        this.params.opinion = choice;

        this.loadingState = true;
        const myOpinion = await this.getMyOpinion();
        // console.log('choice---myopinion', myOpinion, choice)
        choice == 2 || myOpinion == 2 ? await this.setMyOpinion() : this.loadingState = false
        this.$loop.goOnTick();
      } catch (error) {
        console.log(error)
        this.$loop.goOnTick();
        this.$refs.toast.pop();
        this.loadingState = false;
      }
    },
    //  获取今日观点数据
    async getOpinion () {
      try {
        const opinion = await remoteDAO.invoke(constant.InterfaceEnum.GET_OPINION, {
          date: tools.DateFormat(new Date(), 'yyyyMMdd')
        })
        console.log(`获取今日观点：${opinion.gainOpinion};${opinion.slipOpinion}`)
        this.selected.leftNum = opinion.gainOpinion;
        this.selected.rightNum = opinion.slipOpinion;
        this.loadingState = false;
      } catch (error) {
        console.log(error)
        this.$refs.toast.pop();
        this.loadingState = false;
      }
    },
    // 设置今日本人观点
    async setMyOpinion () {
      try {
        // params { opinion, userCode, date}
        const res = await remoteDAO.invoke(constant.InterfaceEnum.SET_MY_OPINION, this.params)
        if (res == -1) {
          this.loadingState = false;
          throw new Error();
        }
        this.params.opinion == '0' ? this.selected.leftNum += 1
          : this.params.opinion == '1' ? this.selected.rightNum += 1
          : this.selected.state == '0' ? this.selected.leftNum -= 1
          : this.selected.rightNum -= 1

        this.selected.state = this.params.opinion;

        this.loadingState = false;
      } catch (error) {
        console.log(error)
        this.$refs.toast.pop();
        this.loadingState = false;
      }
    },
    // 获取本人今日观点
    async getMyOpinion () {
      try {
        let myOpinion = await remoteDAO.invoke(constant.InterfaceEnum.GET_MY_OPINION, this.params)

        myOpinion = myOpinion != 1 && myOpinion != 0 ? 2 : myOpinion;
        this.selected.state = myOpinion
        return myOpinion;
      } catch (error) {
        console.log(error)
        this.$refs.toast.pop();
        this.loadingState = false;
      }
    }
  },
  mounted () {
    this.loadingState = true;
    this.params.userCode = LocalDAO.getUserCode();
    this.params.date = tools.DateFormat(new Date(), 'yyyyMMdd');
    // 获取今日观点人数
    // this.$loop.register(this.getOpinion);
    // 如果登录成功 则直接获取本人今日观点
    if (LocalDAO.getUserCode()) {
      this.getMyOpinion();
    }
  },
  activated () {
    this.$loop.register(this.getOpinion);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import '../../../assets/css/variables.less';
  *{
    margin:0;
    padding: 0;
  }
  b{
    font-weight: 500;
  }
  .opinionBar{
    height: 0.945rem;
    width:100%;
    position: absolute;
    z-index: 10000000;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.13);
  }
  .thumbs_up{
    width:92%;
    margin:0.1rem auto;
    height:0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .disabled{
      opacity: .2;
    }
    .selected{
      animation: bounce .8s;
    }
    p{
      width:.7rem;
      height:0.3rem;
      font: 0.12rem/.3rem PingFangSC;
      border: 1px solid #eb333b;
      border-radius: 0.5rem;
      background-repeat: no-repeat;
      background-size: .18rem;
      background-position: 0.08rem 0.05rem;
    }
    p:first-child{
      background-image: url('~assets/images/up.png');
      background-size: 0.16rem;
      text-indent: 0.2rem;
      color: #eb333b;
    }
    p:nth-child(2){
      font-size: .15rem;
      height: 0.4rem;
      width: auto;
      border: none;
      line-height: 0.2rem;
      span{
        display: block;
      }
      .red{
        color: #eb333b;
      }
      .green{
        color: green;
      }
      .blue{
        font-size: 0.12rem;
        color:#36a0ef;
      }
      .resetTip{
        font-size: .12rem;
        color: #a4a4a4;
      }
    }
    p:last-child{
      color: #1aae52;
      text-indent: -0.2rem;
      border: 1px solid #1aae52;
      background-image: url('~assets/images/down.png');
      background-size: 0.16rem;
      background-position: 0.45rem 0.09rem;
    }
  }
  .progressBar{
  width:90%;
  margin: auto;
  display: flex;
  color: white;
  p{
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    font-size: 0.1rem;
    font-family: PingFangSC;;
    width:50%;
    height:0.17rem;
    background: #eb333b;
    text-indent: 0.2rem;
    border-bottom-left-radius: 0.30rem;
    border-top-left-radius: 0.30rem;
  }
  p:last-child{
    box-sizing: border-box;
    width: 50%;
    background: #1aae52;
    justify-content: flex-end;
    padding-right: 0.2rem;
    border-radius: 0;
    border-bottom-right-radius: 0.30rem;
    border-top-right-radius: 0.30rem;
  }
}
  @-webkit-keyframes bounce /* Safari and Chrome */
{
  0%   {transform:scale(1.2);}
  30%  {transform:scale(1.1);}
  50%  {transform:scale(1.2);}
  65%  {transform:scale(1);}
  85% {transform:scale(1.1);}
  100% {transform:scale(1);}
}
</style>
